import React, { Component } from 'react';
import { StyleSheet, View, Text, Dimensions, Alert } from 'react-native';
import { CascadeDatePicker, Label, Button } from 'iftide';

export default class Basic extends Component {
    constructor() {
        super()
        this.state = {
            startTime: '',
            endTime: '',
            msg:'',
            openDayArr:true
        }
    }


    operate1 = (time) => {

        this.setState({
            startTime: time[0],

            endTime: time[1]
        })
        CascadeDatePicker.hide();
    }






    timeSelectFun = (ind, setDate, end) => {
    
        this.setState({
            msg:{
                ind,end
            }
        })
        let endTime = end
        if (ind == 0) {
            let data = new Date(endTime)
            data.setTime(data.getTime() - 30 * 24 * 3600 * 1000)
            if(this.state.openDayArr){

                setDate(`${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()}`, end)
            }else{

                setDate(`${data.getFullYear()}-${data.getMonth() + 1}`, end)
            }


        }
        if (ind == 1) {

            let data = new Date(endTime)
            data.setTime(data.getTime() - 3 * 30 * 24 * 3600 * 1000)


            if(this.state.openDayArr){

                setDate(`${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()}`, end)
            }else{

                setDate(`${data.getFullYear()}-${data.getMonth() + 1}`, end)
            }


        }
        if (ind == 2) {

            let data = new Date(endTime)
            data.setTime(data.getTime() - 6 * 30 * 24 * 3600 * 1000)


            if(this.state.openDayArr){

                setDate(`${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()}`, end)
            }else{

                setDate(`${data.getFullYear()}-${data.getMonth() + 1}`, end)
            }


        }
        if (ind == 3) {

            // let data = new Date()
            // data.setTime(data.getTime() - 12 * 30 * 24 * 3600 * 1000)

            if(this.state.openDayArr){

                setDate('2020-01-01','2021-02-02')
            }else{

                setDate('2020-01-01','2021-02-01')
            }



        }



    }


    fun1() {
        // alert(this.state.startTime)
        alert(1)
        let minTime,maxTime;
        if(this.state.openDayArr){
            minTime="2019-04-05"
            maxTime="2027-02-02"
        }else{
            minTime='2019-04'
            maxTime='2027-02'
        }


        CascadeDatePicker.show({
            // title:"浮层标题1",
            // clickMask:true,
            startTime: this.state.startTime,
            endTime: this.state.endTime,
            minTime,
            maxTime,
            operateFunc: this.operate1,
            timeSelectFun: this.timeSelectFun,
            openTipTitle:true,
            openDayArr:this.state.openDayArr,
            dateTipTitle:["年","月","日"],
            opendefaultTime:true
        });
    }


    render() {
        const content = `       交易正在处理，请您等待交易结果。您也可以稍后申请状态中查看购买结果`;
        return (
            <View style={[styles.container]}>
                <Button
                    title={"点击显示浮层1"}
                    marginLeft={2}
                    onPress={() => this.fun1()}

                />

                <View style={{ height: 70, width: (Dimensions.get('window').width - 40) }}>
                    <Text style={{ fontSize: 18, paddingLeft: 10, paddingRight: 10, marginTop: 20 }}>
                        {content}
                    </Text>
                </View>


                <View>
                    <Text>
                        {JSON.stringify(this.state.msg)}
                    </Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: "column",
    },
    text: {
        fontSize: 14,
        marginBottom: 10,
        marginTop: 10,
    }
})